<template>
    <teleport to="body">
        <div
            class="a-modal c-position-fixed c-left-top c-s-100 c-f-h"
            :class="placement"
            ref="pop"
            v-if="value"
        >
            <slot></slot>
        </div>
    </teleport>
</template>

<style lang="scss" scoped>
.a-modal {
    background-color: rgba(0, 0, 0, 0.2);
    &.top-left {
        justify-content: flex-start;
        align-items: flex-start;
    }
    &.top-center {
        justify-content: space-around;
        align-items: flex-start;
    }
    &.top-right {
        justify-content: flex-end;
        align-items: flex-start;
    }

    &.center-left {
        justify-content: flex-start;
        align-items: center;
    }
    &.center-center {
        justify-content: center;
        align-items: center;
    }
    &.center-right {
        justify-content: flex-end;
        align-items: center;
    }

    &.bottom-left {
        justify-content: flex-start;
        align-items: flex-end;
    }
    &.bottom-center {
        justify-content: center;
        align-items: flex-end;
    }
    &.bottom-right {
        justify-content: flex-end;
        align-items: flex-end;
    }
}
</style>

<script>
import popIdUtil from "../common/popIdUtil"
import utils from '../common/utils'

export default {
    name: 'AModal',
    emits: ['update:value'],
    props: {
        value: {
            type: Boolean,
            default: false
        },
        clickBgToClose: {
            type: Boolean,
            default: false,
        },
        escToClose: {
            type: Boolean,
            default: true,
        },
        placement: {
            type: String,
            default: 'center-center'
        }
    },
    data() {
        return {
            popId: null
        }
    },
    watch: {
        value(val) {
            if (val) {
                this.onPopShown()
            } else {
                this.onPopHidden()
            }
        }
    },
    methods: {
        getPopEl() {
            return utils.getEl(this.$refs.pop)
        },
        getContentEl() {
            return this.getPopEl()?.children[0]
        },
        addEventListener() {
            let popEl = this.getPopEl()
            popEl.addEventListener('click', this.onBgClick)

            if (this.escToClose) {
                window.document.addEventListener('keydown', this.onDocumentKeydown)
            }
        },
        removeEventListener() {
            if (this.escToClose) {
                window.document.removeEventListener('keydown', this.onDocumentKeydown)
            }
        },
        onBgClick(e) {
            if (!this.clickBgToClose) {
                return
            }
            let contentEl = this.getContentEl()
            if (!contentEl) {
                return
            }
            if (
                contentEl.contains(e.target)
                || !window.document.contains(e.target)
            ) {
                return
            }
            this.hideModal()
        },
        onDocumentKeydown(e) {
            if (e.keyCode == 27 && popIdUtil.isTop(this.popId)) {
                this.hideModal()
            }
        },
        showModal() {
            this.$emit('update:value', true)
        },
        hideModal() {
            this.$emit('update:value', false)
        },
        onPopShown() {
            if (this.escToClose) {
                this.popId = popIdUtil.create()
            }
            this.$nextTick(() => {
                this.addEventListener()
            })
        },
        onPopHidden() {
            this.removeEventListener()

            popIdUtil.remove(this.popId)
        },
    },
    unmounted() {
        this.onPopHidden()
    }
}
</script>